<template>
  <div class="parent">
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else v-loading="chartLoading">
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  chartLoading: {
    type: Boolean,
    default: false
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  axisData: [],
  barData: [],
  lineData: [],
  option: {}
});
const { option, axisData, barData, lineData } = toRefs(state);

watchEffect(() => {
  console.log(props.chartData, "props.chartData");
  if (JSON.stringify(props.chartData) == "{}") {
    isShowEcharts.value = false;
  } else {
    isShowEcharts.value = true;
  }
  axisData.value = [];
  for (const key in props.chartData) {
    const element = props.chartData[key];
    if (key == "12") {
      element.forEach(item => {
        axisData.value.push(item.timeValue);
        barData.value.push(item.value);
      });
    }
    if (key == "32") {
      element.forEach(item => {
        lineData.value.push(item.value);
      });
    }
  }
  if (isShowEcharts.value) getoptions();
});
const getoptions = () => {
  // console.log(response);
  option.value = {
    title: {
      text: "Cooling Load and COP Overt Time ",
      top: "2",
      left: "center"
    },
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    color: ["#4786FF", "#91CC75"],
    grid: {
      left: "30px",
      top: "80px",
      right: "20px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      data: ["Cooling Load", "COP"],
      top: "30"
    },
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      name: "",
      type: "category",
      boundarGap: false,
      data: axisData.value,
      axisPointer: {
        type: "shadow"
      }
    },
    yAxis: [
      {
        name: "Cooling Load",
        type: "value",
        alignTicks: true,
        position: "left",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#4786FF"
          }
        }
      },
      {
        name: "COP",
        type: "value",
        position: "right",
        alignTicks: true,
        offset: 0,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#91CC75"
          }
        },
        axisLabel: {
          formatter: "{value} "
        }
      }
    ],
    series: [
      {
        name: "Cooling Load",
        data: barData.value,
        type: "bar",
        yAxisIndex: 0,
        lineStyle: {
          width: 33,
          color: "#4786FF"
        }
      },
      {
        name: "COP",
        data: lineData.value,
        type: "line",
        yAxisIndex: 1,
        lineStyle: {
          color: "#14C7C7",
          width: 2,
          type: "dashed"
        },
        smooth: true
      }
    ]
  };
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
